<template>
	<div>
		<div class="goods-item">
			<image v-if="goodsInfo.storeHeadImage"
				:src="picServiceUrl+goodsInfo.storeHeadImage+'?time='+goodsInfo.updateTime" mode="widthFix">
				<div class="name">{{goodsInfo.storeName}}</div>
				<div class="address">
					<div class="title">{{goodsInfo.storeAddress}}</div>
					<div class="btn" @click="goAddress">导航</div>
				</div>
				<div class="info" v-show="goodsInfo.distanceTencentKm">距离：{{goodsInfo.distanceTencentKm}}km</div>
				<div class="info">行业：{{goodsInfo.subjectType}}</div>
				<div class="info">营业时间：{{goodsInfo.storeHoursStart}}-{{goodsInfo.storeHoursEnd}}</div>
				<div class="desc">
					<div style="font-weight: 600;">使用说明</div>
					<div>到店消费 → 告知收银员使用在花一付款 → 扫描在花一特约商户收款码 → 付款即可省钱</div>
				</div>

				<div class="go-wifi" @click="goWifi" v-if="goodsInfo.storeWifiName && environment=='weixin'">
					<image style="width: 24px; height: 21px" src="/static/image/icon2/wifi.png" mode=""></image>
					<view>连接WIFI</view>
				</div>
		</div>


		<!-- <div @click="goOrder" class="go-order">
			<div>去买单</div>
		</div> -->
	</div>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				goodsInfo: null,
				picServiceUrl: app.globalData.picServiceUrl,
				isGoods: false,
				environment: null
			}
		},
		onLoad(e) {
			this.goodsInfo = JSON.parse(e.item);
			// this.getGoods();


			//#ifdef  MP-WEIXIN
			this.environment = "weixin"
			// #endif

			//#ifdef  MP-ALIPAY
			this.environment = "alipay"
			// #endif

		},
		methods: {
			goWifi() {
				uni.navigateTo({
					url: "/pages/newIndex/scanWifi/scanWifi?id=" + this.goodsInfo.id
				})
			},
			tipByState(state) {
				uni.stopWifi({
					success(res) {
						console.log(res.errMsg)
					}
				})
				switch (state) {
					case 12001:
						uni.showToast({
							title: "当前系统不支持相关能力",
							icon: "none"
						})
						break;
					case 12002:
						uni.showToast({
							title: "密码错误",
							icon: "none"
						})
						break;
					case 12003:
						uni.showToast({
							title: "连接失败，请稍后再试",
							icon: "none"
						})
						break;
					case 12004:
						uni.showToast({
							title: "连接失败，请稍后再试",
							icon: "none"
						})
						break;
					case 12005:
						uni.showToast({
							title: "未打开 Wi-Fi 开关",
							icon: "none"
						})
						break;
					case 12006:
						uni.showToast({
							title: "未打开 GPS 定位开关",
							icon: "none"
						})
						break;
					case 12007:
						uni.showToast({
							title: "用户拒绝授权链接 Wi-Fi",
							icon: "none"
						})
						break;
					case 12007:
						uni.showToast({
							title: "无效Wi-Fi名称",
							icon: "none"
						})
						break;
					default:
						uni.showToast({
							title: "连接失败，请稍后再试",
							icon: "none"
						})
						break;
				}
			},
			getGoods() {
				uni.request({
					url: app.globalData.serviceUrl +
						'/UserMiniProgramController/getOfflineBusinessGoodsList',
					method: 'POST',
					data: {
						offlineBusinessId: this.goodsInfo.id,
						// categoryId: this.typeList ? this.typeList[this.typeIndex].id : 0
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if (res.data.data) {
							this.isGoods = res.data.data.length;
						}

					}
				});
			},
			goOrder() {
				uni.navigateTo({
					url: "../../qrCode/qrCode?id=" + this.goodsInfo.id
				})
			},
			goAddress() {
				uni.openLocation({
					longitude: this.goodsInfo.storeTencentLongitude,
					latitude: this.goodsInfo.storeTencentLatitude,
					name: this.goodsInfo.storeName,
					address: this.goodsInfo.storeAddress
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.go-wifi {
		padding: 10px;
		border-radius: 50%;
		border: 1px solid #333;
		margin-top: 20px;
		width: 70px;
		text-align: center;
	}

	.goods-item {
		background: #fff;
		padding: 10px;
		margin-bottom: 15px;
		border-radius: 10px;
		color: #666;
		font-size: 14px;

		image {
			width: 100%;
			border-radius: 5px;
		}

		.desc {
			background: #eee;
			padding: 10px;
		}

		.name {
			font-size: 16px;
			margin-bottom: 10px;
			color: #333;
			margin-top: 15px;
		}

		.address {
			display: flex;

			.title {
				flex: 1 1 0;
			}

			.btn {
				flex: 0 0 50px;
				text-decoration: underline;
			}
		}

		.info {
			margin: 5px 0;
		}
	}

	.go-order {
		position: fixed;
		bottom: 0;
		width: 100%;

		div {
			height: 35px;
			line-height: 35px;
			text-align: center;
			border: 1px solid #333;
			border-radius: 5px;
			margin: 20px;
			color: #fff;
			background: #333;
		}
	}
</style>
